import { hexColorToRGBA } from "@/pages/smart-page/util ";
import { componentStyle } from "../common/common";
import {
  BASE_ECHARTS_SELECT,
  DEFAULT_TOOLTIP,
} from "@/pages/smart-page/util/chart";

export function baseFunnelOption(chart_option, chart) {
  // 处理shape attr
  let customAttr = {};
  if (chart.customAttr) {
    customAttr = JSON.parse(chart.customAttr);
    if (customAttr.color) {
      chart_option.color = customAttr.color.colors;
    }
    // tooltip
    if (customAttr.tooltip) {
      const tooltip = JSON.parse(JSON.stringify(customAttr.tooltip));
      const reg = new RegExp("\n", "g");
      tooltip.formatter = tooltip.formatter.replace(reg, "<br/>");
      chart_option.tooltip = tooltip;

      const bgColor = tooltip.backgroundColor
        ? tooltip.backgroundColor
        : DEFAULT_TOOLTIP.backgroundColor;
      chart_option.tooltip.backgroundColor = bgColor;
      chart_option.tooltip.borderColor = bgColor;
    }
  }
  // 处理data
  if (chart.data) {
    chart_option.title.text = chart.title;
    if (chart.data.series.length > 0) {
      chart_option.series[0].name = chart.data.series[0].name;
      // size
      if (customAttr.size) {
        chart_option.series[0].width = customAttr.size.funnelWidth + "%";
      }
      // label
      if (customAttr.label) {
        chart_option.series[0].label = customAttr.label;
      }
      const valueArr = chart.data.series[0].data;
      for (let i = 0; i < valueArr.length; i++) {
        // const y = {
        //   name: chart.data.x[i],
        //   value: valueArr[i]
        // }
        const y = valueArr[i];
        y.name = chart.data.x[i];
        // color
        y.itemStyle = {
          color: hexColorToRGBA(
            customAttr.color.colors[i % customAttr.color.colors.length],
            customAttr.color.alpha
          ),
        };
        y.selectedMode = true;
        y.select = BASE_ECHARTS_SELECT;
        // y.type = 'funnel'
        chart_option.series[0].data.push(y);
      }
    }
  }
  componentStyle(chart_option, chart);
  return chart_option;
}
